cd<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <span>状态：</span>
          <el-radio-group v-model="selectOptions.status" @change="currentStatusChange">
            <el-radio-button v-for="(item, index) in statusMaps" :label="item.value" name="status" :key="index">{{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <div style="display: inline-block;float: right">
          <el-select v-model="selectOptions.query" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-form-item>
            <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="doSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="moments" highlight-current-row v-loading="listLoading"
              style="width: 100%;" element-loading-text="玩命请求中。。。">
      <el-table-column width="80" prop="id" label="圈圈id">
      </el-table-column>
      <el-table-column width="100" prop="uid" label="用户uid">
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="140" sortable>
      </el-table-column>
      <el-table-column prop="avatar" label="头像" width="90">
        <template slot-scope="scope">
          <div class="user-avatar" v-if="scope.row.avatar">
            <a :href="scope.row.avatar" target="_blank"><img :src="scope.row.avatar" alt=""></a>
          </div>
          <div class="user-avatar" v-else>
            <img src="../../../static/images/default.png" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="圈圈内容" min-width="120">
        <template slot-scope="scope">
          <div class="content" v-if="scope.row.content">
            {{ scope.row.content.q_description }}
          </div>
          <div class="contentPic" v-if="scope.row.content.urls">
            <span class="piclist" v-for="pics in scope.row.content.urls">
              <a :href="pics" target="_blank"> <img :src="pics"></a>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="location" label="发布圈圈的地址"width="140">
      </el-table-column>
      <el-table-column prop="up" label="圈圈点赞"width="110">
        <template slot-scope="scope">
          <i class="fa fa-thumbs-o-up" style="color: #FF3125;font-size: 16px;">{{scope.row.up}}</i>
        </template>
      </el-table-column>
      <el-table-column prop="up" label="圈圈评论"width="110" >
        <template slot-scope="scope">
          <el-button size="small"  type="success" @click="commentList(scope.row.id, scope.row.comment_num)">{{scope.row.comment_num}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="180" :formatter="ceateTime">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="setUserStatus(scope.row.uid, 1)" v-if="scope.row.status === '1'">锁定用户</el-button>
          <el-button type="success" size="small" @click="setUserStatus(scope.row.uid, 2)" v-else>解锁用户</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
          <el-button type="danger" size="small" @click="setHide(scope.row.id, 1)" v-if="scope.row.hide === '0'">私有</el-button>
          <el-button type="success" size="small" @click="setHide(scope.row.id, 0)" v-else>公开</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="对话信息" v-model="dialog" :close-on-click-modal="false" style="width:2000px;margin: 0 auto;">
     <template v-for="item in comments">
       <div style="border-left: 1px solid #333;border-right: 1px solid #333;border-top: 1px solid #333;padding:8px">
         <span v-if="item.parent != null" style="margin-left: 30px;  display: block; margn-top: 17px" >
             <span v-if="item.parent.nickname !== null ">{{item.parent.nickname}}</span>
             <span class="avatar" v-if="item.parent.avatar !== null "><img :src="item.parent.avatar"></span>:&nbsp;&nbsp;&nbsp;
             <span v-if="item.parent.content !== null ">{{item.parent.content}}</span>
             <br />
             <br />
        </span>
         <span v-if="item.son" style="border-bottom: 1px solid #ff00ff;margin-left: 15px ">
            <span v-if="item.son.nickname !== null ">{{item.son.nickname}}</span>
            <span class="avatar" v-if="item.son.avatar !== null "><img :src="item.son.avatar"></span>:&nbsp;&nbsp;&nbsp;
            <span v-if="item.son.content !== null ">{{item.son.content}}</span>
            <br>
            <br>
            <br>
        </span>
       </div>
     </template>

    </el-dialog>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>

  </section>
</template>

<script>
  import NProgress from 'nprogress'
  import util from '../../util'
  import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        filters: {
          name: ''
        },
        dialog: false,
        comments: [],
        moments: [],
        total: 0,
        page: 1,
        listLoading: false,
        options: [
          {value: 'id', label: '圈圈id'},
          {value: 'uid', label: '用户uid'},
          {value: 'nickname', label: '用户昵称'}
        ],
        statusMaps: [
          {value: -1, label: '全部'},
          {value: 1, label: '正常'},
          {value: 0, label: '锁定'}
        ],
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : '',
          status: this.$route.query.status !== undefined ? this.$route.query.status : -1
        }
      }
    },
    methods: {
      commentList(id, num) {
        if (num > 0) {
          this.dialog = true
          let param = {'id': id}
          apiTree('userMoment/index', 'moment/listComment', param).then((res) => {
            this.comments = res.d.data
          })
        }
      },
      ceateTime(row) {
        return util.formatDate.format(new Date(row.create_time * 1000), 'yyyy-MM-dd hh:mm:ss')
      },
      // 性别显示转换
      formatSex: function (row, column) {
        return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
      },
      _reload() {
        this.getMoments()
      },
      // 改变当前状态
      currentStatusChange() {
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      doSearch() {
        if (this.selectOptions.query) {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
        }
      },
      // 获取圈圈列表
      getMoments() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: '',
            status: -1
          }
        }
        this.listLoading = true
        NProgress.start()
        apiTree('userMoment/index', 'moment/index', para).then((res) => {
          this.total = res.d.total_num
          this.moments = res.d.data
          this.listLoading = false
           NProgress.done()
        })
      },
      handleDel: function (row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          NProgress.start()
          let param = {id: row.id, uid: row.uid}
          apiTree('userMoment/index', 'moment/deleteMoment', param).then((res) => {
            this.listLoading = false
            NProgress.done()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.listLoading = false
            this.getMoments()
          })
        })
      },
      // 锁定用户
      setHide(id, hide) {
        this.$confirm('确定进行该操作吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          NProgress.start()
          let param = {id: id, hide: hide}
          apiTree('userMoment/index', 'moment/setHide', param).then((res) => {
            NProgress.done()
            if (res.s === 1) {
              this.listLoading = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getMoments()
            }
          }).catch(() => {

          })
        })
      },
      // 锁定用户
      setUserStatus(uid, _type) {
        this.$confirm('确定进行该操作吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          NProgress.start()
          let param = {ids: uid, type: _type}
          apiTree('userMoment/index', 'user/setUserStatus', param).then((res) => {
            NProgress.done()
            if (res.s === 1) {
              this.listLoading = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getMoments()
            }
          })
        }).catch(() => {

        })
      }
    },
    mounted() {
      this.getMoments()
    },
    watch: {
      $route: 'getMoments'
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .user-avatar
    width 60px
    height 60px
    border-radius 50%
    & img
      width 100%
      height 100%
      border-radius 50%
  .piclist {
    display: inline-block
    width: 50px
    height: 50px
    overflow: hidden
    padding: 10px
  }
  .avatar
    display inline-block
    width 25px;
    height: 25px;
</style>
